<template>

	<view style="overflow-x: hidden">
		<!-- #ifdef MP-WEIXIN -->
		<view :style="'height: calc( ' + getMobileInfo.height + 'px + ' + getMobileInfo.top + 'px);'"></view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view :style="'height: calc( ' + getSystemInfo.safeArea.top + 'px + 44px);'"></view>
		<!-- #endif -->
		<image class="bg" :src="'../../../static/bg/' +  bg+'.jpg'" mode="scaleToFill"></image>
		<view class="center searchDiv">
			<fa-icon type="search" size="22" color="#fff"></fa-icon>
			<input @blur="cityInput" class="input" type="text" v-model="address" placeholder="请输入城市名,快速查询天气"
				placeholder-style="color:#fff" />
		</view>

		<view class="center addressDiv">
			<view class="address" @click="getInfo">
				<view>{{weatherdata.city}}</view>
				<fa-icon type="rotate-right" size="22" color="#fff" style="margin-left: 10px"></fa-icon>

			</view>
			<view class="updateTime">{{weatherdata.reporttime}} 更新</view>
		</view>
		<view class="center talk_day">56个民族，55个加分.</view>
		<view class="center wenduDiv">
			<view class="wendu">
				<view class="wendu-test">{{weatherdata.temperature}}</view>
				<view class="wendu-icon">℃</view>
			</view>
			<view class="cond_txt">
				<image :src="weather_icon" style="width: 50px; height: 50px" mode=""></image>
				{{ weatherdata.weather }}
			</view>
			<view style="display: flex; justify-content: space-between; color: #ffffff; font-size: 24px">
				<view style="font-size: 12px;display: flex;justify-content: center;align-items;align-items:baseline;">
					<view>日出</view>
					<view style="font-size: 18px; margin-left: 5px">{{hfdata.sunrise}}</view>
				</view>
				<view style="font-size: 12px; display: flex; justify-content: center; align-items: baseline">
					<view>日落</view>
					<view style="font-size: 18px; margin-left: 5px">{{hfdata.moonset}}</view>
				</view>
			</view>
		</view>
		<view class="nowinfo">
			<view class="nowinfo-cell">
				<view class="test-desc">体感温度(℃)</view>
				<view class="test-val">{{tg}}</view>
			</view>
			<view class="lineCol"></view>
			<view class="nowinfo-cell">
				<view class="test-desc">温度(℃)</view>
				<view class="test-val">{{weatherdata.temperature}}</view>
			</view>
			<view class="lineCol"></view>
			<view class="nowinfo-cell">
				<view class="test-desc">风向</view>
				<view class="test-val">{{weatherdata.winddirection}}</view>
			</view>
			<view class="lineCol"></view>
			<view class="nowinfo-cell">
				<view class="test-desc">风力(级)</view>
				<view class="test-val">{{weatherdata.windpower}}</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="nowinfoDiv">
			<view class="nowinfo">
				<view class="nowinfo-cell">
					<view class="test-desc">云量</view>
					<view class="test-val">{{hfdata.cloud}}</view>
				</view>
				<view class="lineCol"></view>
				<view class="nowinfo-cell">
					<view class="test-desc">降水量(mm)</view>
					<view class="test-val">{{hfdata.precip}}</view>
				</view>
				<view class="lineCol"></view>
				<view class="nowinfo-cell">
					<view class="test-desc">能见度(km)</view>
					<view class="test-val">{{hfdata.vis}}</view>
				</view>
				<view class="lineCol"></view>
				<view class="nowinfo-cell">
					<view class="test-desc">相对湿度(%)</view>
					<view class="test-val">{{hfdata.humidity}}</view>
				</view>
			</view>
		</view>

		<view class="maxTitle">未来天气</view>
		<view class="line"></view>
		<view class="day7">
			<template v-for="(day,index) in weather_day" :key="index">
				<view class="oneday">
					<view class="">{{ day.fxDate }}</view>
					<view class="">{{ day.tempMax }}~{{ day.tempMin }}℃</view>
					<view class="">
						{{ day.textDay }}
						<image v-bind:src="'../../../static/icon/' + day.iconDay + '.png'"></image>
					</view>
					<view class="">{{ day.windDirDay + day.windScaleDay }}级</view>
				</view>
			</template>
		</view>

		<view class="maxTitle">生活指数</view>
		<view class="line"></view>
		<view class="lifeRowDiv">
			<template v-for="(item,index) in hfqt" :key="index">
				<view v-if='item.type == "8"' class="lifeRow lifeRow1">
					<view class="imgDiv">
						<image src="../../../static/img/shushidu.png" mode=""></image>
					</view>
					<view class="info">
						<view class="lifeTitle">舒适度 {{ item.category }}</view>
						<view class="lifeDesc">{{ item.text }}</view>
					</view>
				</view>
				<view v-else-if="item.type == '4'" class="lifeRow">
					<view class="imgDiv">
						<image src="../../../static/img/xiche.png" mode=""></image>
					</view>
					<view class="info">
						<view class="lifeTitle">钓鱼 {{ item.category }}</view>
						<view class="lifeDesc">{{ item.text }}</view>
					</view>
				</view>
				<view v-else-if="item.type == '3'" class="lifeRow">
					<view class="imgDiv">
						<image src="../../../static/img/chuanyi.png" mode=""></image>
					</view>
					<view class="info">
						<view class="lifeTitle">穿衣 {{ item.category }}</view>
						<view class="lifeDesc">{{ item.text }}</view>
					</view>
				</view>
				<view v-else-if="item.type == '9'" class="lifeRow">
					<view class="imgDiv">
						<image src="../../../static/img/ganmao.png" mode=""></image>
					</view>
					<view class="info">
						<view class="lifeTitle">感冒 {{ item.category }}</view>
						<view class="lifeDesc">{{ item.text }}</view>
					</view>
				</view>
				<view v-else-if="item.type == '1'" class="lifeRow">
					<view class="imgDiv">
						<image src="../../../static/img/yundong.png" mode=""></image>
					</view>
					<view class="info">
						<view class="lifeTitle">运动 {{ item.category }}</view>
						<view class="lifeDesc">{{ item.text }}</view>
					</view>
				</view>
				<view v-else-if="item.type == '5'" class="lifeRow">
					<view class="imgDiv">
						<image src="../../../static/img/ziwaixian.png" mode=""></image>
					</view>
					<view class="info">
						<view class="lifeTitle">紫外线 {{ item.category }}</view>
						<view class="lifeDesc">{{ item.text }}</view>
					</view>
				</view>
				<view v-else-if="item.type == '10'" class="lifeRow">
					<view class="imgDiv">
						<image src="../../../static/img/kongqizhiliang.png" mode=""></image>
					</view>
					<view class="info">
						<view class="lifeTitle">空气污染 {{ item.category }}</view>
						<view class="lifeDesc">{{ item.text }}</view>
					</view>
				</view>
				<view v-else-if="item.type == '14'" class="lifeRow">
					<view class="imgDiv">
						<image src="../../../static/img/taiyang.png" mode=""></image>
					</view>
					<view class="info">
						<view class="lifeTitle">晾晒 {{ item.category }}</view>
						<view class="lifeDesc">{{ item.text }}</view>
					</view>
				</view>
				<view style="margin: 0px 10px; position: relative">
					<view class="lifeRowLine"></view>
				</view>
			</template>
		</view>

		<view style="height: 20px; width: 100%"></view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive
	} from "vue";
	import faIcon from '../../..//components/kilvn-fa-icon/fa-icon.vue';
	import dayjs from 'dayjs'
	const getMobileInfo = ref({})
	const bg = ref(1)
	const address = ref('')
	const isShow_cityScroll = ref(false)
	const weather_icon = ref('')
	const weatherdata = ref([])
	const weather_day = ref([])
	const adcode = ref('110000')
	const tg = ref('')
	// 和风天气获取信息
	const hfdata = ref([])
	// 和风天气获取城市其他信息
	const hfqt = ref([])
	const cityInput = (e) => {
		uni.request({
			url: 'https://restapi.amap.com/v3/weather/weatherInfo', //仅为示例，并非真实接口地址。
			data: {
				city: `${e.detail.value}`,
				key: 'faff8e399d526aaf6d71df17caa60dcf',
				extensions: "base"

			},
			success: (res) => {
				weatherdata.value = res.data.lives[0]
				if (res.data.lives[0].weather == '晴') {
					weather_icon.value = '../../../static/icon/100.png'
					bg.value = 4
				} else if (res.data.lives[0].weather == '多云') {
					weather_icon.value = '../../../static/icon/101.png'
					bg.value = 3
				}
				address.value = ''
				console.log(res.data.lives, '成功获取了数据');
			},
			fail: (err) => {
				console.log(err, '报错了亲');
			}
		});
		uni.request({
			url: 'https://geoapi.qweather.com/v2/city/lookup', //仅为示例，并非真实接口地址。
			data: {
				location: `${e.detail.value}`,
				key: '19c6b103520846ffa2bed25be99cc564'
			},
			success: (resa) => {
				console.log(resa.data, '和风天气获取城市locationID');
				// 获取和风天气当日信息
				uni.request({
					url: 'https://devapi.qweather.com/v7/weather/7d', //仅为示例，并非真实接口地址。
					data: {
						location: `${resa.data.location[0].id}`,
						key: '19c6b103520846ffa2bed25be99cc564'
					},
					success: (res) => {
						console.log(res.data, '和风天气获取城市信息');
						hfdata.value = res.data.daily[0]
					},
					fail: (err) => {
						console.log(err, '报错了亲');
					}
				});
				// 和风天气获取适应
				uni.request({
					url: 'https://devapi.qweather.com/v7/indices/1d', //仅为示例，并非真实接口地址。
					data: {
						type: '1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16',
						location: `${resa.data.location[0].id}`,
						key: '84177240f94d47caae559890304aed4c'
					},
					success: (res) => {
						console.log(res.data, '和风天气获取城市其他信息');
						hfqt.value = res.data.daily
					},
					fail: (err) => {
						console.log(err, '报错了亲');
					}
				});
				uni.request({
					url: 'https://devapi.qweather.com/v7/weather/now', //仅为示例，并非真实接口地址。
					data: {
						location: `${resa.data.location[0].id}`,
						key: '19c6b103520846ffa2bed25be99cc564'
					},
					success: (res) => {
						console.log(res.data.now, '和风天气获取实时天气信息33333333333333333333');
						tg.value = res.data.now.feelsLike
					},
					fail: (err) => {
						console.log(err, '报错了亲');
					}
				});
			},
			fail: (err) => {
				console.log(err, '报错了亲');
			}
		});


	}
	onMounted(() => {
		getMobileInfo.value = uni.getMenuButtonBoundingClientRect()
		// uni.showLoading()
		// 根据ip地址获取本地code码
		uni.request({
			url: 'https://restapi.amap.com/v3/ip', //仅为示例，并非真实接口地址。
			data: {
				key: 'faff8e399d526aaf6d71df17caa60dcf',
				output: 'json'

			},
			success: (res) => {
				console.log(res.data, '本地code获取成功');
				adcode.value = res.data.adcode
				uni.request({
					url: 'https://restapi.amap.com/v3/weather/weatherInfo', //仅为示例，并非真实接口地址。
					data: {
						city: `${res.data.adcode}`,
						key: 'faff8e399d526aaf6d71df17caa60dcf',
						extensions: "base"

					},
					success: (res) => {
						weatherdata.value = res.data.lives[0]
						address.value = res.data.lives[0].city
						if (res.data.lives[0].weather == '晴') {
							weather_icon.value = '../../../static/icon/100.png'
							bg.value = 4
						} else if (res.data.lives[0].weather == '多云') {
							weather_icon.value = '../../../static/icon/101.png'
							bg.value = 3
						}
						console.log(res.data.lives, '成功获取了数据');
					},
					fail: (err) => {
						console.log(err, '报错了亲');
					}
				});
				// 和风天气获取城市locationId码
				uni.request({
					url: 'https://geoapi.qweather.com/v2/city/lookup', //仅为示例，并非真实接口地址。
					data: {
						location: `${res.data.city}`,
						key: '19c6b103520846ffa2bed25be99cc564'
					},
					success: (resa) => {
						console.log(resa.data, '和风天气获取城市locationID');
						// 获取和风天气当日信息
						uni.request({
							url: 'https://devapi.qweather.com/v7/weather/3d', //仅为示例，并非真实接口地址。
							data: {
								location: `${resa.data.location[0].id}`,
								key: '19c6b103520846ffa2bed25be99cc564'
							},
							success: (res) => {
								console.log(res.data, '和风天气获取城市信息');
								hfdata.value = res.data.daily[0]
								weather_day.value = res.data.daily
							},
							fail: (err) => {
								console.log(err, '报错了亲');
							}
						});
						// 和风天气获取适应
						uni.request({
							url: 'https://devapi.qweather.com/v7/indices/1d', //仅为示例，并非真实接口地址。
							data: {
								type: '1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16',
								location: `${resa.data.location[0].id}`,
								key: '84177240f94d47caae559890304aed4c'
							},
							success: (res) => {
								console.log(res.data, '和风天气获取城市其他信息');
								hfqt.value = res.data.daily
							},
							fail: (err) => {
								console.log(err, '报错了亲');
							}
						});
					},
					fail: (err) => {
						console.log(err, '报错了亲');
					}
				});
				// 和风天气获取实时天气
				uni.request({
					url: 'https://geoapi.qweather.com/v2/city/lookup', //仅为示例，并非真实接口地址。
					data: {
						location: `${res.data.city}`,
						key: '19c6b103520846ffa2bed25be99cc564'
					},
					success: (resa) => {
						console.log(resa.data.location[0].id, '和风天气获取城市locationID');
						// 获取和风天气当日信息
						uni.request({
							url: 'https://devapi.qweather.com/v7/weather/3d', //仅为示例，并非真实接口地址。
							data: {
								location: `${resa.data.location[0].id}`,
								key: '19c6b103520846ffa2bed25be99cc564'
							},
							success: (res) => {
								console.log(res.data, '和风天气获取城市信息');
								hfdata.value = res.data.daily[0]
								weather_day.value = res.data.daily
							},
							fail: (err) => {
								console.log(err, '报错了亲');
							}
						});
						// 和风天气获取适应
						
						uni.request({
							url: 'https://devapi.qweather.com/v7/weather/now', //仅为示例，并非真实接口地址。
							data: {
								location: `${resa.data.location[0].id}`,
								key: '19c6b103520846ffa2bed25be99cc564'
							},
							success: (res) => {
								console.log(res.data.now, '和风天气获取实时天气信息33333333333333333333');
								tg.value = res.data.now.feelsLike
							},
							fail: (err) => {
								console.log(err, '报错了亲');
							}
						});
					},
					fail: (err) => {
						console.log(err, '报错了亲');
					}
				});
				

			},
			fail: (err) => {
				console.log(err, '报错了亲');
			}
		});



	})
</script>

<style lang="less">
	view {
		z-index: 9;
	}



	.createby {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		height: 30px;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.4);
		padding-bottom: 30px;
	}

	.bg {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
	}

	.center {
		width: 85%;
		margin: 0 auto;
		position: relative;
	}

	.searchDiv {
		position: relative;
		display: flex;
		padding: 5px 0px;
		height: 50px;
		align-items: center;
		color: #ffffff;
		box-sizing: border-box;
		padding-left: 10px;
	}

	.searchDiv>.input {
		outline: 0;
		padding: 5px;
		padding-left: 15px;
		color: #ffffff;
		font-size: 16px;
		width: 80%;
	}

	.scroll {
		position: absolute;
		z-index: 999;
		left: 0;
		right: 0;
		top: 200rpx;
		margin: auto;
		width: 650rpx;
		height: 500rpx;
		background: rgba(255, 255, 255, 0.81);
	}

	.scrollItem {
		color: #333;
		padding: 30rpx 20rpx;
		border-bottom: 2rpx solid #e6e6e6;
	}

	.line {
		position: relative;
	}

	.line::after {
		content: '';
		width: 200%;
		height: 1px;
		position: absolute;
		border-bottom: 1px solid rgba(255, 255, 255, 0.25);
		transform: scale(0.5);
		transform-origin: 0 0;
		box-sizing: border-box;
	}

	.lineCol::after {
		content: '';
		width: 1px;
		height: 200%;
		position: absolute;
		border-left: 1px solid rgba(255, 255, 255, 0.25);
		transform: scale(0.5);
		transform-origin: 0 0;
		box-sizing: border-box;
	}

	.lineRow::after {
		content: '';
		width: 200%;
		height: 1px;
		position: absolute;
		border-bottom: 1px solid rgba(255, 255, 255, 0.25);
		transform: scale(0.5);
		transform-origin: 0 0;
		box-sizing: border-box;
	}

	.addressDiv {
		display: flex;
		justify-content: space-between;
		color: #ffffff;
		align-items: center;
		padding: 5px 0px;

		.address {
			font-size: 36px;
			display: flex;
			align-items: center;
		}

		.updateTime {
			font-size: 14px;
		}
	}

	.talk_day {
		color: #ffffff;
		font-size: 14px;
	}

	.wenduDiv {
		padding: 50px 0px;
	}

	.wendu {
		color: #ffffff;
		text-align: center;
		display: flex;
		align-items: flex-start;
		justify-content: center;

		.wendu-test {
			font-size: 88px;
		}

		.wendu-icon {
			font-size: 30px;
			display: inline-block;
			padding-top: 15px;
			padding-left: 10px;
		}
	}

	.cond_txt {
		color: #ffffff;
		margin: auto;
		text-align: center;
		font-size: 24px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.day7 {
		position: relative;
		display: flex;
		justify-content: space-around;
		flex-wrap: nowrap;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.4);
		font-size: 13px;
		overflow-x: scroll;
		margin-bottom: 30px;
		width: 100%;

		.oneday {
			view {
				width: 100px;
				padding: 3px 0px;
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			image {
				width: 30px;
				height: 30px;
			}
		}
	}

	.nowinfoDiv {
		width: 100%;
		margin-bottom: 30px;
	}

	.nowinfo {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.4);
		font-size: 13px;
	}

	.nowinfo-cell {
		flex: 1;
		text-align: center;
		padding: 13px 0px;

		.test-desc {
			margin-bottom: 8px;
			display: inline-block;
		}

		.test-val {
			font-size: 12px;
		}
	}

	.maxTitle {
		position: relative;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.4);
		font-size: 15px;
		text-align: center;
		line-height: 40px;
	}

	.lifeRowDiv {
		position: relative;
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.4);
		font-size: 14px;

		.lifeRow {
			padding: 10px 10px 10px 10px;
			display: flex;
			height: 90px;
			box-sizing: border-box;
			position: relative;

			.imgDiv {
				width: 70px;
				height: 70px;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-shrink: 0;

				image {
					width: 50px;
					height: 50px;
				}
			}

			.info {
				flex: 1 1 auto;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.lifeTitle {
					font-size: 14px;
				}

				.lifeDesc {
					font-size: 12px;
				}
			}
		}

		.lifeRowLine {
			position: relative;
		}

		.lifeRowLine::after {
			content: '';
			width: 200%;
			height: 1px;
			position: absolute;
			bottom: 0;
			left: 0;
			border-bottom: 1px solid rgba(255, 255, 255, 0.25);
			transform: scale(0.5);
			transform-origin: 0 0;
			box-sizing: border-box;
		}
	}
</style>